<template>
    <div class="position-relative">
        <div class="d-flex">
            <div :class="{'active':searchTypeTab == 0}" class="timeTabBox" @click="switchSearchTypeTab(0)">常规</div>
            <div :class="{'active':searchTypeTab == 1}" class="timeTabBox" @click="switchSearchTypeTab(1)">里程桩</div>
        </div>
        <div class="border-light-theme flexCenterBetween" style="margin-left:-1px;margin-top:-1px;">
            <a-input type="text" class="invisibleInput" placeholder="按道路搜索名称" v-model="wayName" @change="doSearch()"/>

            <template v-if="searchTypeTab==1">
                <div>K</div>
                <a-input type="text" class="invisibleInput pl-4" placeholder="公里桩" v-model="stake"
                         @change="doSearchStake" style="width: 60px"/>
            </template>

            <!--<img src="../../assets/img/emergencyDuty/iconSearch.png" class="mr-10" @click="doSearch()"/>-->
            <a-icon type="close" class="text-primary mr-10" @click="cleanMap()"/>
        </div>

        <div class="position-absolute w-100 border-light-theme"
             style="top:56px;background-color:rgba(11, 35, 82, 0.9);margin-left:-1px;" v-show="!isCollapse">
            <div v-for="(item,i) in list" :key="i" @click="changeValue(item)" class="jselectOption"
                 :class="{'active':item.id == selectItem.id}">
                {{item.name}}
            </div>

        </div>
    </div>
</template>

<script>
    import {getWayByLikeName, pileToCrd} from "../../common/api";
    import {GetCenterPoint, isInteger} from "../../utils/js-utils";
    import {formatTake} from "../../utils/sys_utils";

    export default {
        name: "road-search",
        props: {value: "", mapApp: {default: null}},
        data() {
            return {
                searchTypeTab: 0,
                selectItem: {},
                isCollapse: true,
                list: [],

                wayName: "",
                stake: "",// 公里桩,
                stakeDraw: null,// 公里桩,

                mapDraw: {
                    draw: null,
                    type: null, //0点 1线
                }
            }
        },
        methods: {
            doSearch() {
                console.log(this.wayName);
                if (!this.wayName) {
                    this.isCollapse = true;
                    return;
                }
                let type = "";
                if (this.searchTypeTab == 1) {
                    type = 0;
                }
                getWayByLikeName(this.wayName, type).then((res) => {
                    if (res.isSuccess) {
                        console.log(res);
                        this.isCollapse = false;
                        this.list = res.data;
                    }
                })
            },
            changeValue(item) {
                console.log("changeValue", item);
                this.cleanMap();
                if (item.id != this.selectItem.id) {
                    this.selectItem = item;
                    this.wayName = item.name;
                    console.log(item)

                    if (item.type == 0) {
                        // this.$emit('jsearch', this.selectItem)
                        const getCenterPoint = new GetCenterPoint();
                        getCenterPoint.addL(item.range);
                        var polylineObj = {strcoords: item.range, color: '#4200ff'};
                        var polyline = this.mapApp.showPolyline(polylineObj);
                        this.setDraw(polyline, 1)
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    } else {
                        const getCenterPoint = new GetCenterPoint();
                        getCenterPoint.addP(item.range)
                        var iconImg = null;

                        if (item.type == 2) {
                            iconImg = require('../../assets/img/map/server.png')
                        } else {
                            if (item.status == 1) {
                                iconImg = require('../../assets/img/map/gate-open.png')
                            } else if (item.status == 0) {
                                iconImg = require('../../assets/img/map/gate-close.png')
                            } else {
                                iconImg = require('../../assets/img/map/gate-open.png')
                            }
                        }
                        var monitor = this.mapApp.showMonitor({
                            width: 46,
                            height: 46,
                            strcoords: item.range,
                            title: item.name,
                            imgurl: iconImg,
                        });
                        this.setDraw(monitor, 0);
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }

                }
                this.$forceUpdate();
                setTimeout(() => {
                    this.isCollapse = true;
                }, 100)
            },
            doSearchStake(v) {
                console.log(this.stake);
                if (isInteger(this.stake) && this.selectItem.id) {
                    console.log("pileToCrd");
                    pileToCrd(formatTake(this.stake) + "000", this.selectItem.id).then(res => {
                        if (res.result === "true" || res.result === true) { //请求成功
                            if (this.stakeDraw) {
                                this.mapApp.removeMonitor(this.stakeDraw);
                            }
                            const crd = res.crd;  //更新坐标点
                            const getCenterPoint = new GetCenterPoint();
                            getCenterPoint.addP(crd);
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: crd,
                                imgurl: require('../../assets/img/map/km.png'),
                            });
                            this.stakeDraw = monitor;
                            this.mapApp.moveTo(getCenterPoint.getCenter())
                        }
                    })
                }


            },
            switchSearchTypeTab(code) {
                this.searchTypeTab = code;
                this.wayName = "";
            },
            cleanMap() {
                // HiPolyline
                if (this.mapDraw.draw) {
                    if (this.mapDraw.type == 0) { //点处理
                        this.mapApp.removeMonitor(this.mapDraw.draw);

                    } else if (this.mapDraw.type === 1) { //线处理
                        this.mapApp.removeOverlay(this.mapDraw.draw);
                    }
                    this.mapDraw.draw = null;
                }
                if (this.stakeDraw) {
                    this.mapApp.removeMonitor(this.stakeDraw);
                }
            },
            setDraw(draw, type) {
                this.mapDraw.type = type;
                this.mapDraw.draw = draw;
            }
        }, mounted() {
            if (this.value) {
                this.selectItem = this.list.find((v) => {
                    return v.value == this.value;
                })
            }
        }
    }
</script>

<style scoped>
    .jselectOption {
        padding: 6px 14px;
        cursor: pointer;
    }

    .jselectOption:hover {
        background-color: rgba(82, 168, 208, 0.4)
    }

    .jselectOption.active {
        background-color: rgba(82, 168, 208, 0.8)
    }

    ::-webkit-input-placeholder {
        color: rgba(82, 168, 208, 0.5);
    }
</style>
